<template>
  <el-dialog v-model="visible" title="弹窗显示父组件传参数据" width="30%">
    <p>用户ID：{{ user.id }}</p>
    <p>用户姓名：{{ user.name }}</p>
    <template #footer>
      <el-button @click="closeDialog">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { watch, ref } from 'vue'

const props = defineProps<{
  visible: boolean
  user: { id: number; name: string }
}>()

const emit = defineEmits(['update:visible'])

const visible = ref(props.visible)

// 监听父组件传来的 visible 变化，保持同步
watch(
  () => props.visible,
  (val) => {
    visible.value = val
  },
)

// 监听内部 visible 变化，通知父组件更新
watch(visible, (val) => {
  emit('update:visible', val)
})

const closeDialog = () => {
  visible.value = false
}
</script>
